<template>
  <div>
    <el-table
      ref="table"
      :data="tableData"
      border
      stripe
      :height="tableHeight"
      :header-cell-style="{'background':'#F5F4F7'}"
    >
      <el-table-column
        type="index"
        label="序号"
        width="60"
        :index="indexMethod"
        align="center"
      />
      <el-table-column
        prop="strparamcode"
        label="字段编码"
        min-width="150"
      />
      <el-table-column
        prop="strparamname"
        label="字段名称"
        min-width="150"
      />
      <el-table-column
        prop="inttypeshow"
        label="字段类别"
        min-width="150"
      />
      <el-table-column
        prop="fieldproperty"
        label="字段属性"
        min-width="150"
      />
      <el-table-column
        prop="bytisonlyshow"
        label="控制方式"
        min-width="100"
        align="center"
      />
      <el-table-column fixed="right" label="启用/停用" width="100px" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.blnisinactive"
            active-color="#3FBEB8"
            inactive-color="#B7B7B7"
            :active-value="0"
            :inactive-value="1"
            @change="ebable(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="180"
        fixed="right"
        align="center"
      >
        <template v-slot="scope">
          <el-button
            type="text"
            @click="detailRow(scope.row)"
          >查看</el-button>
          <el-button
            type="text"
            :disabled="scope.row.blnisinactive === 1"
            @click="editRow(scope.row)"
          >编辑</el-button>
          <el-button
            type="text"
            @click="delRow(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="paging.total > 0"
      background
      :current-page.sync="paging.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size.sync="paging.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="paging.total"
      @size-change="queryListByPage('search')"
      @current-change="queryListByPage"
    />
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/composition-api'
import calculateCommonTableHeight from '@/layout/mixin/calculateCommonTableHeight'
import { queryList, changeState, delData, findcanuse } from '@/api/system/bill-setting/extended-field-setting/index'
import { useBlnisactive } from '@/hooks/useBlnisactive'

export default {
  name: 'ExtendedFieldSettingTableArea',
  mixins: [calculateCommonTableHeight],
  data() {
    return {
      tableData: [],
      searchForm: {},
      listLoading: false,
      paging: {
        total: 0,
        page: 1,
        size: 10
      },
      inttimetypes: [
        { label: '日期', value: 1 },
        { label: '时间', value: 2 }
      ],
      findcanuse: []
    }
  },
  created() {
    this.getFindcanuse()
  },
  setup() {
    const ebable = (row) => {
      return useBlnisactive(changeState, {
        blnisinactive: row.blnisinactive,
        lngparamid: row.lngparamid
      })
    }
    const state = reactive({
      tableData: []
    })
    return {
      ebable,
      ...toRefs(state)
    }
  },
  methods: {
    indexMethod(index) {
      index = (index + 1) + (this.paging.page - 1) * this.paging.size
      return index
    },
    // 获取列表查询
    // query(searchForm) {
    //   this.searchForm = searchForm
    //   this.paging.page = 1
    //   this.queryListByPage()
    // },
    queryListByPage(str = '') {
      if (str === 'search') {
        this.paging.page = 1
      }
      this.listLoading = true
      this.$nextTick(() => {
        queryList(
          this.searchForm,
          this.paging.page,
          this.paging.size
        ).then(res => {
          if (res.code === 20000) {
            this.paging.total = res.data.total
            res.data.rows.forEach(item => {
              if (item.inttype === 1) {
                item.fieldproperty = '字符长度：' + item.fieldproperty
              }
              if (item.inttype === 2) {
                item.fieldproperty = '小数位数：' + item.fieldproperty
              }
              if (item.inttype === 3) {
                this.inttimetypes.forEach(e => {
                  if (e.value === item.fieldproperty) { item.fieldproperty = '日期：' + e.label }
                })
              }
              if (item.inttype === 4) {
                this.findcanuse.forEach(e => {
                  if (e.lngdatadictionarytypeid === item.fieldproperty) { item.fieldproperty = '数据字典类别：' + e.strdatadictionarytypename }
                })
              }
            })
            this.tableData = res.data.rows
          }
        }).finally(() => {
          this.listLoading = false
        })
      })
    },
    // 启用停用
    // changeState(row) {
    //   changeState({
    //     blnisinactive: row.blnisinactive,
    //     lngparamid: row.lngparamid
    //   }).then(res => {
    //     if (res.code === 20000) {
    //       this.$message.success(res.message)
    //       this.queryListByPage()
    //     } else {
    //       row.blnisinactive = row.blnisinactive === 1 ? 0 : 1
    //     }
    //   }).catch(() => {
    //     row.blnisinactive = row.blnisinactive === 1 ? 0 : 1
    //   })
    // },
    // 查看
    detailRow(row) {
      this.$emit('detail', row.lngparamid)
    },
    // 编辑
    editRow(row) {
      this.$emit('edit', row.lngparamid)
    },
    // 删除
    delRow(row) {
      this.$confirm('是否删除该信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delData(row.lngparamid).then(res => {
          if (res.code === 20000) {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success'
            })
            this.queryListByPage()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 数据字典
    getFindcanuse() {
      findcanuse().then(res => {
        if (res.code === 20000) {
          this.findcanuse = res.data
          this.$parent.$parent.$refs.dialog.findcanuse = res.data
        }
      })
    }

  }
}
</script>

<style scoped>

</style>
